<template>
  <div class="all" ref="ActiveYear9">
    <div class="bg" v-if="reportNinthJson">
      <div class="allab">
        <LImage class="img-text" :src="Config.img('2201_page9_bg.png')"></LImage>
      </div>

      <div class="all"></div>
      <div class="content">
        
        <div class="all2"></div>
        <LImage class="img-logo1" :src="Config.img('2201_page9_logo1.png')"></LImage>

        <div class="all"></div>
        <div class="row" v-if="reportNinthJson.tag.length > 4">
          <div>
            <LImage class="img-dou70" :src="Config.img('2201_page9_left.png')"></LImage>
          </div>
          <text class="font70">{{reportNinthJson.tag}}</text>
          <div class="jend">
            <LImage class="img-dou70" :src="Config.img('2201_page9_right.png')"></LImage>
          </div>
        </div>
        <div class="row" v-else-if="reportNinthJson.tag.length > 3">
          <div>
            <LImage class="img-dou70" :src="Config.img('2201_page9_left.png')"></LImage>
          </div>
          <text class="font80">{{reportNinthJson.tag}}</text>
          <div class="jend">
            <LImage class="img-dou70" :src="Config.img('2201_page9_right.png')"></LImage>
          </div>
        </div>
        <div class="row" v-else>
          <div>
            <LImage class="img-dou130" :src="Config.img('2201_page9_left.png')"></LImage>
          </div>
          <text class="font130">{{reportNinthJson.tag}}</text>
          <div class="jend">
            <LImage class="img-dou130" :src="Config.img('2201_page9_right.png')"></LImage>
          </div>
        </div>


        <div class="all3"></div>
        <LImage class="img-logo2" :src="Config.img('2201_page9_logo2.png')"></LImage>
      </div>

      <div class="all"></div>
      <div v-if="data" class="but" 
      @stopPropagation="stopPropagation" @click="shareClick">
        <text class="font44 text1">{{'分享我的报告'}}</text>
      </div>
      <div class="all"></div>
    </div>
  </div>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
  .richtext {
    background-color:rgba(0, 0, 0, 0)
  }
  .yinyue {
    position: absolute;
    right: 40;
    top: 40;
    width: 60px;
    height: 60px;
  }
  .text1 {
    color: #E5F3FF;
  }
  .bg {
    overflow: hidden;
    flex: 1;
    font-display: column;
    align-items: center;
    background-image: linear-gradient(to top, #FC4246, #EE0104);
  }
  .allab {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
  }
  .content {
    font-display: column;
    align-items: center;
    flex: 14;
    background-color: #F3F9FF;
    width: 580px;
    border-radius: 290px;
    border-width: 10px;
    border-color: #FE6F71;
  }
  .but {
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to top, #FF7200, #FFE956);
    width: 484px;
    height: 100px;
    border-radius: 50px;
  }
  .img-text {
    position: absolute;
    width: 750px;
    height: 1146px;
  }
  .img-logo1{
    width: 191px;
    height: 44px;

    margin-top: 40px;
  }
  .img-logo2{
    width: 562px;
    height: 530px;
  }



  .img-dou130 {
    width: 60px;
    height: 56px;
  }
  .font130 {
    font-size: 130px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FC4246;
    line-height: 182px;
    letter-spacing: 4px;
  }

  .img-dou70 {
    width: 50px;
    height: 47px;
  }
  .font70 {
    font-size: 70px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FC4246;
    line-height: 108px;
    letter-spacing: 4px;
  }

  .img-dou80 {
    width: 55px;
    height: 51px;
  }
  .font80 {
    font-size: 80px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FC4246;
    line-height: 112px;
    letter-spacing: 4px;
  }
</style>

<script>

//功能
import jconfig from "@/_js/config"; 

export default {

  props:{
    data:{
      type:Object,
      default:undefined,
    },
  },

  data() {
    return {
      Config: jconfig,
      data:undefined,
      reportNinthJson:undefined,
    }
  },

  /* reportNinthJson 9
    * 
    *   tag 关键
    **/
  mounted(){
    var reportNinthJson = this.data.reportNinthJson;
    this.reportNinthJson = reportNinthJson;
    setTimeout(() => {
      this.stylek = 'rgba(0, 0, 0, 0)';
      this.$forceUpdate();
    }, 1000);
  },

  methods:{
    /******************** 手势*/
    stopPropagation(){
      return true;
    },

    /******************** 按钮*/
    //分享
    shareClick() {
      this.$emit("share");
    }
  }
}
</script>
